<!--
 * @Author: your name
 * @Date: 2021-11-29 15:26:36
 * @LastEditTime: 2021-12-01 20:00:00
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\client\src\components\ClassifyCom.vue
-->
<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{ title }}</span>
    </div>
    <div
      v-for="item in data"
      :key="item.id"
      class="classify-item-box"
      @click="handlerClick(item.value)"
    >
      <div>{{ item.text }}</div>
      <div>共计{{ item.num }}篇文章</div>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "推荐阅读",
      require: false,
    },
    data: {
      type: Array,
      default: null,
      require: true,
    },
    handlerClick: {
      type: Function, //参数类型
      default: null, //默认值
      require: false, //是否必须有
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/scss/common/common.scss";
.box-card {
  @include background_color("card_background");
  @include font_color("card_text_color");
  border: none;
}
.clearfix {
  font-size: 14px;
  font-weight: bold;
  @include font_color("text-color");
}
.classify-item-box {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  cursor: pointer;
}
.classify-item-box:hover {
  color: #ff0064;
}
</style>
